<script lang="ts" setup>
import wechat from '@/assets/img/wechat.png'
import QQ from '@/assets/img/qq.png'
</script>

<template>
  <el-container class="gap-5 max-sm:gap-2">
    <a
      class="p-2 bg-gray-300/50 use-hover-bg use-radius-sm use-transitions-shadow-short"
      href="https://gitee.com/yshujia-utopia/utopia"
      target="_blank"
    >
      <SvgIcon name="gitee" svg-class="!size-10 max-sm:!size-8" />
    </a>
    <a
      class="p-2 bg-gray-300/50 use-hover-bg w-fit use-radius-sm use-transitions-shadow-short"
      href="https://github.com/YShuJia/utopia"
      target="_blank"
    >
      <SvgIcon name="github" svg-class="!size-10 max-sm:!size-8" />
    </a>
    <a
      class="p-2 bg-gray-300/50 use-hover-bg w-fit flex use-radius-sm use-transitions-shadow-short"
      href="https://space.bilibili.com/668322664?spm_id_from=333.1007.0.0"
      target="_blank"
    >
      <SvgIcon name="bilibili" svg-class="!size-10 max-sm:!size-8" />
    </a>
    <a
      class="p-2 bg-gray-300/50 use-hover-bg w-fit flex use-radius-sm use-transitions-shadow-short"
      href="javascript:"
    >
      <el-dropdown :width="100" placement="bottom" trigger="hover">
        <SvgIcon name="wechat" svg-class="!size-10 max-sm:!size-8" />
        <template #dropdown>
          <el-container class="p-1 overflow-hidden">
            <ImageBox :lazy="false" :url="wechat" class="rounded-lg !size-36" />
          </el-container>
        </template>
      </el-dropdown>
    </a>
    <a
      class="p-2 bg-gray-300/50 use-hover-bg w-fit flex use-radius-sm use-transitions-shadow-short"
      href="javascript:"
    >
      <el-dropdown :width="100" placement="bottom" trigger="hover">
        <SvgIcon name="qq" svg-class="!size-10 max-sm:!size-8" />
        <template #dropdown>
          <el-container class="p-1 overflow-hidden">
            <ImageBox :lazy="false" :url="QQ" class="rounded-lg !size-36" />
          </el-container>
        </template>
      </el-dropdown>
    </a>
  </el-container>
</template>

<style lang="scss" scoped></style>
